<template>
  <div class="basic-information">
    <div class="relevancy-account">
      <div class="account-header">
        <p>商品信息</p>
      </div>
    </div>
    <div class="user-information" style="margin-top: 20px">
      <div class="left">
        <el-form ref="form" label-width="100px" size="mini">
          <el-form-item label="商品编号:">
            <span>{{goodsDetail.product_code}}</span>
          </el-form-item>

          <el-form-item label="供货商:">
            <span class="wegiht">{{goodsDetail.supplier_name}}</span>
          </el-form-item>
          <el-form-item label="商品类型:">
            <span v-if="goodsDetail.type == 1">普通商品</span>
            <span v-if="goodsDetail.type == 2">卡密商品</span>
            <span v-if="goodsDetail.type == 3">虚拟商品</span>
          </el-form-item>
          <el-form-item label="缩略图:">
            <img style="width: 50px;height: 50px" :src="goodsDetail.thumbnail" alt="">
          </el-form-item>
          <el-form-item label="商品轮播:">
            <span v-for="(item,index) in valueArray" :key="index">
              <img style="width: 50px;height: 50px" :src="item" alt="">
            </span>

          </el-form-item>
          <el-form-item label="商品备注:">
            <el-input v-model="goodsDetail.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" disabled />
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <el-form ref="form" label-width="100px" size="mini">
          <el-form-item label="商品名称:">
            <span class="wegiht">{{goodsDetail.mgsl_name}}</span>
          </el-form-item>
          <el-form-item label="商品副标题:">
            <span>{{goodsDetail.sub_title}}</span>
          </el-form-item>
          <el-form-item label="所属类目:">
            <span>{{goodsDetail.category1_name}}{{goodsDetail.category2_name}}{{goodsDetail.category3_name}}</span>
          </el-form-item>
          <el-form-item label="上架状态:">
            <span v-if="goodsDetail.status == 1">已上架</span>
            <span v-if="goodsDetail.status == 2">已下架</span>
          </el-form-item>
          <el-form-item label="商品主图:">
            <img style="width: 50px;height: 50px" :src="goodsDetail.main_image" alt="">
          </el-form-item>
          <!-- <el-form-item label="商品详情:">
            <div class="checkdetail">点击查看</div>
          </el-form-item> -->
        </el-form>
      </div>
    </div>
    <div class="relevancy-account">
      <div class="account-header">
        <p>规格库存</p>
      </div>
    </div>
    <div class="user-information" style="margin-top: 20px">
      <div class="left">
        <el-form ref="form" label-width="100px" size="mini">
          <el-form-item label="规格名称:">
            <span>{{goodsDetail.product_list ? goodsDetail.product_list[0].name : ''}}</span>
          </el-form-item>
          <el-form-item label="SKU码:">
            <span>{{goodsDetail.product_list ? goodsDetail.product_list[0].name : ''}}</span>
          </el-form-item>
          <el-form-item label="规格单位:">
            <span>{{goodsDetail.product_list ? goodsDetail.product_list[0].unit : ''}}</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <el-form ref="form" label-width="100px" size="mini">
          <el-form-item label="规格图:">
            <img v-if="goodsDetail.product_list" style="width: 50px;height: 50px" :src="goodsDetail.product_list[0].image" alt="">
          </el-form-item>
          <el-form-item label="成本价格:">
            <span class="wegiht">{{goodsDetail.product_list ? goodsDetail.product_list[0].cost_price : ''}}</span>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      goodsDetail: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        radio: 0
      }
    },
    computed: {
      valueArray() {
        // 将父组件传递的值以逗号分隔为数组
        if(this.goodsDetail && this.goodsDetail.slider_image)
        return this.goodsDetail.slider_image.split(',');
      }
    }
  }
</script>
<style scoped lang="scss">
  .basic-information {
    .user-information {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .left,
      .right {
        width: 48%;
      }
    }

    .relevancy-account {
      width: 100%;

      .account-header {
        border-left: 4px solid #4095e5;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #eeeeee;
        padding: 0 20px;
        box-sizing: border-box;

        p {
          font-size: 14px;
        }
      }
    }

    .account-content {
      width: 100%;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;

      .left,
      .right {
        width: 48%;
      }
    }
  }
  .wegiht{
    font-weight: 600;
    color: #1890ff;
  }
  .checkdetail{
    font-size: 12px;
    line-height: 26px;
    width: 100px;
    text-align: center;
    color: #1890ff;
    border-radius: 4px;
    border: 1px solid #1890ff;
  }
</style>
